<template>
	<view>
		<view class="nav-content">
			<uni-nav-bar fixed statusBar :border="false" @clickLeft="back" backgroundColor="#F5F7F8" left-icon="left"
				title="技师审核">
				<view slot='right' @click="rightShow">
					<uni-icons custom-prefix="iconfont" type="icon-shaixuan" size="18"></uni-icons>
				</view>
			</uni-nav-bar>
		</view>
		
		<view class="tab-content">
			<u-sticky :z-index="10">
				<u-tabs :list="typelist" :show-bar="false" :is-scroll="false" :current="current"
					@change="change"></u-tabs>
			</u-sticky>
		</view>
		<view class="">
			<cc-pullScroolView class="pullScrollView" ref="pullScroll" :back-top="true" :pullDown="pullDown">
				<view class="audit-list">
					<view class="audit-inner-each" v-for="(item,index) in list" :key="index">
						<view class="audit-inner-top">
							<view v-if="item.status == 1" class="fixed-status">
								审核中
							</view>
							<view v-if="item.status == 2" class="fixed-status fixed-status-wait" style="background-color: #6fcf72;">
								<text v-if="item.type == 1">入驻成功</text>
								<text v-if="item.type == 2">解约成功</text>
							</view>
							<view v-if="item.status == 3" class="fixed-status fixed-status-wait" style="background-color: #f73030;">
								<text v-if="item.type == 1">入驻驳回</text>
								<text v-if="item.type == 2">解约驳回</text>
							</view>
							<view class="name-lines">{{item.name}}
								<view class="tit">{{item.type == 1?'入驻':'解约'}}</view>
							</view>
							<!-- 类型:1=签约,2=解约 -->
							<view class="information-list">
								<view class="item-datum">
									<view class="item-title">技师性别</view>
									<view class="info">{{item.sex== 1?'男':'女'}}</view>
								</view>
								<view class="item-datum">
									<view class="item-title">技师年龄 </view>
									<view class="info">{{item.age}}岁</view>
								</view>
								<view class="item-datum">
									<view class="item-title">技师工龄</view>
									<view class="info">{{item.experience}}年</view>
								</view>
								<view class="item-datum" @click="callPhone(item.mobile)">
									<view class="item-title">联系方式</view>
									<view class="info">{{item.mobile}}</view>
									<image src="https://qiniu-cdn.maeiyun.com/imgs/shangjia/phone.png" mode=""></image>
								</view>
								<view class="item-datum">
									<view class="item-title">服务城市</view>
									<view class="info">{{item.city}}</view>
								</view>
								<view class="item-datum">
									<view class="item-title">申请时间</view>
									<view class="info">{{item.create_time}}</view>
								</view>
							</view>
							<view class="look-info" @click="todetail(item)">
								查看技师资料 >
							</view>
							<view class="jieyue-content" v-if="item.type == 2 && item.status == 1&&item.remark">
								<view class="jieyue-title">解约原因</view>
								<view class="jieyue-info">
									{{item.remark}}
								</view>
							</view>
							<view class="jieyue-content" v-if="item.type == 1 && item.status == 3 &&item.content">
								<view class="jieyue-title">入驻驳回原因</view>
								<view class="jieyue-info">
									{{item.content}}
								</view>
							</view>
							<view class="jieyue-content" v-if="item.type == 2&& item.status == 3 && item.remark">
								<view class="jieyue-title">解约申请</view>
								<view class="jieyue-info">
									{{item.remark}}
								</view>
							</view>
							<view class="jieyue-content" v-if="item.type == 2 && item.status == 3 && item.remark">
								<view class="jieyue-title">驳回原因</view>
								<view class="jieyue-info">
									{{item.content}}
								</view>
							</view>
						</view>
						<view class="bottom-btns" v-if="item.status ==1">
							<view class="jie-btn btn" @click="breakOff(item)">驳回</view>
							<view class="lines"></view>
							<view class="set-btn btn" @click="setYong(item)">通过</view>
						</view>

					</view>

				</view>
				</cc-pullScroolView>
		</view>
		<shaixuanPopup ref="shaixuanPopup" @massageResult="massageResult" />
		<u-modal v-model="show3" show-cancel-button @confirm="dialogConfirm" :content="content"></u-modal>
		<u-modal v-model="show1" show-cancel-button @confirm="dialogInputConfirm">
			<view class="slot-content">
				<input type="text" v-model="bohuitext" placeholder="输入驳回理由" />
			</view>
		</u-modal>
		<u-modal v-model="show2" :title="content" show-cancel-button @confirm="dialogConfirm">
			<view class="slot-content">
				<input type="number" v-model="commission" placeholder="输入佣金比例" />%
			</view>
		</u-modal>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				typelist: [{
					name: '全部',
					id: 0
				}, {
					name: '待审核',
					id: 1
				}, {
					name: '已审核',
					id: 2
				}],
				current: 0,
				downOption: {
					auto: false
				},
				list: [],
				show: false, //筛选弹窗
				show2: false, //设置佣金
				show1: false, //驳回
				show3:false,//解约同意
				screening: { //筛选条件
					age1: 0,
					age2: 0,
					sex: 0,
					name: ""
				},
				content: "",
				currentitem: {},
				bohuitext: "",
				commission: "",
				
				page:1,
				last_page:0,
			}
		},
		onLoad() {
			this.upCallback()
		},
		onReachBottom() {
			if(this.page<this.last_page){
				this.page ++
				this.upCallback()
			}
		},
		methods: {
			pullDown(pullScroll) {
				this.page = 1
				this.list = []
				this.upCallback()
			},
			back() {
				uni.navigateBack()
			},
			todetail(item) {
				uni.navigateTo({
					url: `/pages/technicianTeam/technician?id=${item.technician_id}&type=0`
				})
			},
			callPhone(item){
				this.$util.makeCall(item)
			},
			rightShow() {
				this.show = true
				this.$refs.shaixuanPopup.open()
			},
			massageResult(data) {
				this.screening = data
				this.screening = { //筛选条件
						age1: data.age1,
						age2: data.age2,
						sex: data.sex,
						name: data.elsename
					},
					this.show = false
				this.downCallback()
			},
			breakOff(item) {
				this.content = '是否驳回该技师？'
				this.show1 = true
				this.currentitem = item
			},
			setYong(item) {
				if(item.type == 2){
					this.content = '是否同意解约该技师？'
					this.show3 = true
					this.currentitem = item
				}else{
					this.content = '通过该技师申请并设置佣金比例'
					this.show2 = true
					this.currentitem = item
				}
				
			},
			sPositiveInteger(input) {
				// 去除字符串两边的空格
				input = input.trim();
				if (isNaN(Number(input))) {
					return false; // 如果不能转换成数字则返回false
				} else if (!/^[1-9]\d*$/.test(input)) {
					this.$util.msg("只能设置正整数")
					return false; // 如果不是以非零开头且只包含数字的字符串则返回false
				} else {
					return true; // 其他情况都认定为正整数并返回true
				}
			},
			dialogConfirm() { //确认
				let that = this
				if(this.currentitem.type == 1){
					if (this.sPositiveInteger(this.commission)) {
						this.getThrough(this.commission)
					}
				}else{
					this.getThrough(0)
				}
			},
			getThrough(commission){
				let that = this
				this.request.httpTokenRequest({
					url: "store.technician_apply_to_store/applySecureStore",
					method: "POST"
				}, {
					id: this.currentitem.id,
					technician_id: this.currentitem.technician_id,
					status: 2,
					commission: commission
				}).then(res => {
					if (res.code == 0) {
						that.$util.msg(res.msg)
						that.downCallback()
					} else {
						that.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
			dialogInputConfirm(e) {
				console.log(e)
				let that = this
				this.request.httpTokenRequest({
					url: "store.technician_apply_to_store/applySecureStore",
					method: "POST"
				}, {
					id: this.currentitem.id,
					content: this.bohuitext,
					technician_id: this.currentitem.technician_id,
					status: 3
				}).then(res => {
					if (res.code == 0) {
						that.$util.msg(res.msg)
						that.downCallback()
					} else {
						that.$util.msg(res.msg)
						return
					}
				}, error => {})
			},

			change(index) {
				this.current = index;
				this.page = 1
				this.list = []
				this.upCallback()
			},
			downCallback() {
				this.list = []
				this.page = 1
			},
			/*上拉加载的回调*/
			upCallback() {
				let that = this
				this.request.httpTokenRequest({
					url: "store.technician_apply_to_store/checkApply",
					method: "get"
				}, { //审核状态：1=未审核，2=审核通过，3=审核不通过
					status: this.typelist[this.current].id,
					age1: this.screening.age1,
					age2: this.screening.age2,
					sex: this.screening.sex,
					name: this.screening.name,
					page:this.page
				}).then(res => {
					this.$refs.pullScroll.success();
					if (res.code == 0) {
						that.list = [...that.list, ...res.data.data]
						that.last_page = res.data.last_page
					} else {
						that.$util.msg(res.msg)
						return
					}
				}, error => {
					that.mescroll.endErr();
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.nav-content{
		// position: fixed;
		// top: 0;
		// left: 0;
		// right: 0;
		background-color: #F5F7F8;
	}
	.tab-content {
		z-index: 99;
	}

	.audit-list {
		padding: 30rpx;
	}

	.audit-inner-each {
		background: #FFFFFF;
		border-radius: 14rpx;
		margin-bottom: 30rpx;

		.audit-inner-top {
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 4rpx 4rpx rgba(232, 232, 232, 0.5);
			border-radius: 14rpx;
			padding: 30rpx;
			position: relative;

			.fixed-status {
				position: absolute;
				top: 0;
				right: 0;
				background-color: #FFD262;
				color: #8E6600;
				border-radius: 4rpx;
				border-top-right-radius: 14rpx;
				border-bottom-left-radius: 14rpx;
				width: 145rpx;
				height: 60rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #8E6600;
				line-height: 60rpx;
				text-align: center;
			}

			.fixed-status-wait {
				
				color: #fff;
			}

			.name-lines {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 42rpx;

				.tit {
					width: 85rpx;
					height: 30rpx;
					background: #EFEFEF;
					border-radius: 2rpx;
					font-size: 22rpx;
					font-weight: 400;
					color: #949494;
					line-height: 30rpx;
					text-align: center;
					margin-left: 10rpx;
				}
			}

			.information-list {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.item-datum {
					width: 50%;
					display: flex;
					align-items: center;
					margin-top: 11rpx;

					.item-title {
						font-size: 26rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #888888;
						line-height: 37rpx;
						flex: 0 0 auto;
					}
					.info {
						flex-grow: 1;
						font-size: 26rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #000000;
						line-height: 37rpx;
						margin-left: 20rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					
					image{
						width:22rpx;
						height: 22rpx;
					}
				}
			}

			.look-info {
				width: 221rpx;
				height: 46rpx;
				background: rgba(51, 147, 255, 0.14);
				border-radius: 25rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #3393FF;
				line-height: 46rpx;
				text-align: center;
				margin-top: 20rpx;
			}

			.jieyue-content {
				// height: 171rpx;
				background: #F2F2F2;
				border-radius: 14rpx;
				padding: 16rpx 30rpx;
				margin-top: 20rpx;

				.jieyue-title {
					font-size: 24rpx;
					font-weight: 400;
					color: #000000;
					line-height: 37rpx;
				}

				.jieyue-info {
					font-size: 24rpx;
					font-weight: 400;
					color: #7B7B7B;
					line-height: 37rpx;
				}
			}
		}

		.bottom-btns {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 88rpx;
			line-height: 88rpx;

			.btn {
				width: 48%;
				text-align: center;
			}

			.jie-btn {
				font-size: 34rpx;
				font-weight: 400;
				color: #949494;
			}

			.set-btn {
				font-size: 34rpx;
				font-weight: 400;
				color: #3393FF;
			}

			.lines {
				width: 1rpx;
				height: 41rpx;
				background-color: #D5D5D5;
			}
		}
	}

	.slot-content {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;

		input {
			margin: 0;
			text-align: center;
		}
	}
</style>